<meta title="" args="adv" width="600"/>
<style>
    .PAGE_PARAMS_TIP {
        display: none;
    }
</style>
<div class="p">
    <form s="valid,form,nda,datac"
          s-data="adv"
          id="form" class="form-horizontal">
        <table class="table table-striped table-bordered">
            <tr s-valid-role="item">
                <td style="width: 100px;">图片</td>
                <td s="tpl" id="icon" s-click="selectIcon()" s-valid-role="item">
                    <img src="{%=this.picUrl || 'images/upload-bg.jpg'%}" class="adv-img" style="max-width: 150px; max-height: 150px;" />
                    <input autocomplete="off" type="hidden" name="pic" s-valid-error="require()" value="{%=this.pic%}" />
                    <input autocomplete="off" type="hidden" name="picUrl" s-valid-error="require()" value="{%=this.picUrl%}" />
                </td>
            </tr>
            <tr >
                <td>尺寸</td>
                <td class="form-inline">
                    <input autocomplete="off" type="number" name="picWidth" id="picWidth" style="width: 80px;" class="form-control input-sm" /> &times;
                    <input autocomplete="off" id="picHeight" type="number" name="picHeight" class="form-control input-sm"  style="width: 80px;" />
                </td>
            </tr>
            <tr>
                <td>标题</td>
                <td>
                    <input autocomplete="off" type="text" name="name" s-valid-error="require()" class="form-control input-sm" placeholder="请输入标题">
                </td>
            </tr>
            <tr>
                <td>开始时间</td>
                <td>
                    <input autocomplete="off" type="text" name="startTime" s-valid-error="require()"  s="datetimepicker" class="form-control input-sm" placeholder="">
                </td>
            </tr>
            <tr>
                <td>结束时间</td>
                <td>
                    <input autocomplete="off" type="text" name="endTime" s-valid-error="require()" s="datetimepicker" class="form-control input-sm" placeholder="">
                </td>
            </tr>
            <tr>
                <td>人群</td>
                <td>
                    <select class="form-control input-sm" s="select"
                            name="crowdId"
                            s-build="S.get('/api/crowd/list/VALID')">
                        <option value="">不选人群</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <select name="valid" class="form-control">
                        <option value="true">正常</option>
                        <option value="false">锁定</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>页面</td>
                <td class="form-inline">
                    <select class="form-control" s="select"
                            id="pageSelect"
                            s-build="S.get('/api/enum/valuesMap/core.operation.center.domain.Page')"
                            name="page">
                        <option value="NONE">无</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
    <table class="table table-bordered table-striped">
        <tr>
            <td style="width: 100px;">页面参数</td>
            <td>
                <div id="pageParams" s="window"></div>
            </td>
        </tr>
    </table>
</div>
<script>
    S.meta.title = adv ? '编辑' : '新建'
    adv = adv || {}
    S.meta.btns = [
        {
            name: "确定",
            style: "btn btn-primary",
            click: function() {
                $form.validate().done(function() {
                    $pageParams.getParams().done(function(params) {
                        var obj = Smart.serializeToObject($form.node);
                        obj.pageTitle = getPageTitle();
                        obj.params = params;
                        if(adv.id) {
                            S.put("/api/adv/" + adv.id, obj).done(function() {
                                S.close(true)
                            })
                        } else {
                            S.post("/api/adv", obj).done(function() {
                                S.close(true)
                            })
                        }
                    })
                })
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function() {
                S.close();
            }
        }
    ]

    if(!adv) {
        selectIcon();
    }

    function selectIcon() {
        S.popupOpen("/oss/objects-selector.html", {prefix: 'adv'}).done(function(datas) {
            if(datas) {
                var icon = datas[0];
                $icon.data({
                    pic: icon.key,
                    picUrl: icon.url,
                })
                setTimeout(function() {
                    var img = S.node.find(".adv-img")[0]
                    $picWidth.node.val(img.naturalWidth)
                    $picHeight.node.val(img.naturalHeight)
                }, 300)
            }
        })
    }

    $pageSelect.node.change(function () {
        var val = $(this).val();
        var paramData = {}

        $.each((adv.params || "").split("&"), function() {
            var tmps = this.split("=")
            if(tmps.length == 1) {
                paramData[tmps[0]] = ''
            } else {
                paramData[tmps[0]] = decodeURIComponent(tmps[1]);
            }
        })
        $pageParams.load("/operation-center/params_" + val + ".html", {params: paramData})
    })

    S.on("s-ready", function () {
        $pageSelect.node.change();
    })
    function getPageTitle() {
        return $pageSelect.node.find("option[value='" + $pageSelect.node.val() + "']").text();
    }


</script>